<template>
	<!-- 课程组件 -->
	<!-- 全局的热门推荐子组件 -->
	<view class="course-item" :class="{column:isColumn}"
	@click="navTo(`/pages/course/course-detail?id=${item.id}`,{login:true})">
	<!-- 这里点击页面跳转相对应的ID -->
		<view class="item-left">
			<!-- lazy-load懒加载属性vue -->
			<image class="course-img" :src="item.mainImage" lazy-load ></image>
			<view class="course-time">
				{{item.totalTime}}
			</view>
		</view>
		<view class="item-right">
			<view class="title">
				{{item.title}}
			</view>
				<view class="info">
					<view class="nickname iconfont  icon-laoshi2">黄先生</view>
					<view class="count">
						<view v-if="item.isFree" class="money" >免费</view>
						<!-- item.priceDiscount  || item.priceOriginal  判断是优惠还是免费 -->
						<view v-else class="money iconfont icon-moneybag" > {{item.priceDiscount  || item.priceOriginal}}</view>
						<view class="iconfont icon-video">{{item.studyTotal}}人在学</view>
					</view>
				</view>
		</view>
	</view>
</template>

	
<script>
	export default{
		props:{
			isColumn:{  //是否纵向排列图片和文字 （true 纵向  false 横向）
				type:Boolean,
				default:false
			},
			item:{
				type:Object,
				default:()=>({
					id:1,
					mainImage:'/static/images/banner2.jpg',
					totalTime:'00:59:38',
					title:'uni-app梦学谷在线教育uni-app梦学谷在线教育',
					nickName:'梦学谷',
					isFree:0, //是否收费0收费 ， 1免费
					priceOriginal:999,//原价
					priceDiscount:599  ,//优惠价格
					studyTotal:399
				})
			}
		},
		
	}
</script>

<style lang="scss">
	.course-item{
		display: flex;
		//纵向排列
		// flex-direction: column;  //垂直方向
		width: 100%;
		padding:20rpx 0 ;
		border-bottom: 1rpx solid #f1f1f1;
		.item-left{
			position: relative;
			width: 290rpx;
			height: 160rpx;
			margin-right: 20rpx;
			.course-img{
				width: 290rpx;
				height:160rpx;
				border-radius: 10rpx;
				
			}
			.course-time{
				position: absolute;
				right: 5rpx;
				bottom: 5rpx;
				font-size:22rpx ;
				color: #FFFFFF;
				background: rgba(51,51,51,0.4);
				border-radius: 20rpx;
				padding: 0 8rpx;
				}
		}
		.item-right{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 160rpx;
			// margin-left: 25rpx;
			padding-top:5rpx;
			padding-left: 5rpx;
			.title{
				max-width: 365rpx;
				height:70rpx;
				line-height: 35rpx;
				font-size: 28rpx;
				font-weight: bold;
				// 以下的样式显示两行 超出部分 ....显示
				overflow: hidden;
				text-overflow: ellipsis; //显示省略号
				-webkit-line-clamp:2;//最多两行
				display: -webkit-box;
				-webkit-box-orient:vertical;
				white-space: normal;
				
			}
			
			.info{
				.nickname{
					margin-left: 2.5rpx;
					font-size:23rpx;
					color: #999;
				}
			
				.count{
					display: flex;
					// justify-content:space-between;
					align-items: center;
					.iconfont {
						font-size: 23rpx;
						color: #222222;
					}
					.money{
						color:#FB6932 ;
						font-size: 28rpx;
						width: 130rpx;
					}
				}
			}
		}
	}
</style>
